<template>
  <!--  overflow:hidden 溢出隐藏-->
  <div class="login_bg">
    <div class="login">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-width: bold;">博物馆后台管理系统</span>
        </div>
        <!--      通过handleTabsClick作注册和登录两者的区分-->
        <el-tabs v-model="currentIndex" stretch @tab-click="handleTabsClick">
          <el-tab-pane label="登录" name="login">
            <el-form
                :model="admin"
                :rules="rules"
                status-icon ref="loginForm">
              <el-form-item label="用户名" label-width="80px" prop="userName">
                <el-input :prefix-icon="Avatar" placeholder="请输入用户名" v-model="admin.adminName"/>
              </el-form-item>
              <el-form-item label="密码" label-width="80px" prop="password">
                <el-input :prefix-icon="Lock" placeholder="请输入密码" v-model="admin.password" show-password/>
              </el-form-item>
              <el-form-item class="login_button">
                <el-button type="primary" @click="login">登录</el-button>

                <el-button >重置</el-button>

              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="注册" name="register">
            <el-form
                :model="registerForm"
                :rules="rules"
                status-icon ref="registerForm">
              <el-form-item label="用户名" label-width="80px" prop="userName">
                <el-input :prefix-icon="Avatar" placeholder="请输入用户名" v-model="registerForm.adminName"/>
              </el-form-item>
              <el-form-item label="邮箱" label-width="80px">
                <el-input placeholder="请输入邮箱" v-model="registerForm.email"/>
              </el-form-item>
              <el-form-item label="电话" label-width="80px" prop="phone">
                <el-input  placeholder="请输入电话号码" v-model="registerForm.phone" show-password/>
              </el-form-item>
              <el-form-item label="密码" label-width="80px" prop="password">
                <el-input :prefix-icon="Lock" placeholder="请输入密码" v-model="registerForm.password" show-password/>
              </el-form-item>
              <el-form-item label="确认密码" label-width="80px" prop="configurePassword">
                <el-input :prefix-icon="Lock" placeholder="请输入密码" v-model="registerForm.configurePassword" show-password/>
              </el-form-item>

              <el-form-item class="login_button">
                <el-button style="text-align: center" type="primary" @click="register">注册</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

        </el-tabs>
      </el-card>
    </div>
  </div>

</template>

<script>
//导入图标库
import {Avatar,Lock} from "@element-plus/icons-vue"
import request from "@/utils/request";
import Cookies from 'js-cookie'
export default {
  name: "Login",
  data(){
    return{
      currentIndex: "login",
      admin:{},
      Avatar,
      Lock,
      rules:{
        adminName:[
          {required:true,message:'请输入用户名',trigger:'blur'},
          {min:2,max:10,message: '长度在2-10个字符之间',trigger: 'blur'}],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'},
          {min:2,max:10,message: '长度在2-10个字符之间',trigger: 'blur'}],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {min: 10, max: 30, message: '长度在10-30个字符之间', trigger: 'blur'}],
        configurePassword: [
          //  还得新增一个判断语句,当password和configurePassword不一样时,报错
          {required: true, message: '请确认密码', trigger: 'blur'},
          {min: 3, max: 18, message: '长度在3-18个字符之间', trigger: 'blur'}],
        phone: [
          //  还得新增一个判断语句,当password和configurePassword不一样时,报错
          {required: true, message: '请确认电话号码', trigger: 'blur'},
          {min: 3, max: 18, message: '长度在3-18个字符之间', trigger: 'blur'}],
      },
      registerForm:{
        email:"",
        password:"",
        userName: "",
        configurePassword:"",
        phone:"",
      },
      activeTab: "login",
    }
  },
  methods:{
    login(){
      this.$refs['loginForm'].validate((valid) => {
        if(valid){
          request.post("/admin/login",this.admin).then(res => {
            //这里得改为200,而不是Library的0
            if(res.code == '200'){
              this.$message({
                type:"success",
                message:"登录成功"
              })
              //这里的Cookies和后面的{{admin.adminName}}息息相关
              if(res.data != null){
                Cookies.set('admin',JSON.stringify(res.data))
              }
              this.$router.push("/") //登录成功后进行页面跳转,跳转到主页
            }else{
              this.$message({
                type:"error",
                message:res.msg
              })
            }
            // this.load() //刷新表格数据
            // this.dialogVisible = false //关闭弹窗
          })
        }
      })
    },
    register(){
      if(this.registerForm.email != null){
        this.$refs['registerForm'].validate((valid) => {
          if(valid){
            console.log("里面的内容是",this.registerForm)
            request.post('/admin/register',this.registerForm).then(res => {
              if (res.code === '200'){
                this.$notify.success('注册成功')
                //  新增成功后resetFields清空输入框内数据
                this.$refs['registerForm'].resetFields();
              } else{
                this.$notify.error(res.msg)
              }
            })
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
//.btn{
//  color: #fff;
//  background-color: rgb(244,164,96);
//  border-color: rgb(244,164,96);
//}
.login_bg{
  background-repeat: no-repeat;
  background-image: url("../../assets/login_bg.jpg");
  width:100%;
  height: 100vh;
  background-size: 100% 100%;
}
.login_button{
  display: flex;
  justify-content: space-around;
}
.el-card{
  //opacity: 50%;
  background-color: rgba(255,255,255,0.5);
}
.login {
  display: flex;
  width: 600px;
  margin: 0 auto;
  .box-card {
    width: 600px;
    margin: 210px auto;
  //opacity: 50%;
  }
  span{
    color: #9ce3ec;
    font-size: 50px;
    width:500px;
    text-align:center;
    display: flex;
    justify-content:center;
  }
}
</style>